<template>
    <div class="login-container">
        <transition name="fade-zoom">
            <el-card class="login-card" v-show="showCard">
                <h2 class="login-title">登录</h2>
                <el-form
                    @submit.prevent="handleLogin"
                    :model="{ account, password }"
                    size="large"
                >
                    <el-form-item label="账号">
                        <el-input
                            v-model="account"
                            placeholder="请输入账号"
                            clearable
                            size="large"
                            class="rounded-input"
                            prefix-icon="el-icon-user"
                        />
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input
                            v-model="password"
                            type="password"
                            placeholder="请输入密码"
                            show-password
                            clearable
                            size="large"
                            class="rounded-input"
                            prefix-icon="el-icon-lock"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            :loading="loading"
                            style="
                                width: 100%;
                                border-radius: 32px;
                                font-size: 18px;
                                height: 48px;
                            "
                            size="large"
                            @click="handleLogin"
                            class="animated-btn"
                        >
                            登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </transition>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { login } from "./api";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();

const account = ref("");
const password = ref("");
const loading = ref(false);
const message = ref("");
const error = ref("");
const showCard = ref(false);

onMounted(() => {
    setTimeout(() => {
        showCard.value = true;
    }, 100); // 动画延迟
});

function handleLogin() {
    loading.value = true;
    message.value = "";
    error.value = "";
    login(account.value, password.value)
        .then((res) => {
            message.value = res.message;
            ElMessage.success(res.message);
            setTimeout(() => {
                router.push("/home");
            }, 1000);
        })
        .catch((err) => {
            error.value = err.error || "登录失败";
            ElMessage.error(error.value);
        })
        .finally(() => {
            loading.value = false;
        });
}
</script>

<style lang="scss" scoped>
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e0e7ff 0%, #f5f7fa 100%);
    animation: bgFadeIn 1.2s;
}
@keyframes bgFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.login-card {
    width: 440px;
    padding: 48px 36px 36px 36px;
    border-radius: 32px;
    box-shadow: 0 8px 32px 0 rgba(60, 60, 120, 0.18);
    background: #fff;
    transition: box-shadow 0.3s;
}
.login-card:hover {
    box-shadow: 0 16px 48px 0 rgba(60, 60, 120, 0.24);
}
.login-title {
    text-align: center;
    margin-bottom: 32px;
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: 2px;
    color: #3a3a55;
    text-shadow: 0 2px 8px #e0e7ff;
}
.rounded-input :deep(.el-input__wrapper) {
    border-radius: 24px !important;
    font-size: 18px;
    min-height: 48px;
    transition: box-shadow 0.2s;
}
.rounded-input :deep(.el-input__wrapper):focus-within {
    box-shadow: 0 0 0 2px #a5b4fc;
}
.animated-btn {
    transition: transform 0.15s, box-shadow 0.15s;
}
.animated-btn:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px #a5b4fc;
}
.fade-zoom-enter-active {
    animation: fadeZoomIn 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}
@keyframes fadeZoomIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.4s;
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>